<template>
    <div style="width: 80%;margin: 0 auto;">
        <el-form label-width="auto" :style="formCols" style="margin-top: 30px">
            <el-form-item v-for="(item, index) in formBuildList" :label="item.labelName">
                <component :is="components[item.component]" :isEdit="false" :properties="item" :formBuildList="formBuildList"/>
            </el-form-item>
        </el-form>

        <div class="formSubmitButton">
            <el-button @click="cancelStartFlow()">取消</el-button>
            <el-button type="primary" :loading="submitStartInstanceLoading" @click="submitStartInstance()">提交流程</el-button>
        </div>
    </div>
</template>

<script name="StartFlowInstance" setup>
import {queryFlowFormInfo, startFlowInstance} from "@/request/flow";
import {ElNotification} from "element-plus";
import {computed, ref} from "vue";
import {useRoute} from "vue-router";
import YwuFormInput from "@/views/bpmn/form/component/YwuFormInput.vue";
import YwuFormSelect from "@/views/bpmn/form/component/YwuFormSelect.vue";
import YwuFormCascaderSelect from "@/views/bpmn/form/component/YwuFormCascaderSelect.vue";
import YwuFormCheckBox from "@/views/bpmn/form/component/YwuFormCheckBox.vue";
import YwuFormDate from "@/views/bpmn/form/component/YwuFormDate.vue";
import YwuFormInputNumber from "@/views/bpmn/form/component/YwuFormInputNumber.vue";
import YwuFormRadio from "@/views/bpmn/form/component/YwuFormRadio.vue";
import YwuFormRate from "@/views/bpmn/form/component/YwuFormRate.vue";
import YwuFormSwitch from "@/views/bpmn/form/component/YwuFormSwitch.vue";
import YwuFormTime from "@/views/bpmn/form/component/YwuFormTime.vue";
import YwuFormTreeSelect from "@/views/bpmn/form/component/YwuFormTreeSelect.vue";
import YwuFormUploadFile from "@/views/bpmn/form/component/YwuFormUploadFile.vue";
import YwuFormUploadImage from "@/views/bpmn/form/component/YwuFormUploadImage.vue";

// 显式声明组件变量（确保被引用）
const components = { YwuFormInput, YwuFormSelect, YwuFormCascaderSelect, YwuFormCheckBox, YwuFormDate,
    YwuFormInputNumber, YwuFormRadio, YwuFormRate, YwuFormSwitch, YwuFormTime, YwuFormTreeSelect, YwuFormUploadFile, YwuFormUploadImage };


let route = useRoute();

let formBuildList = ref([]);
let globalProperties = ref({
    colNum: 1
});
let submitStartInstanceLoading = ref(false);

let formCols = computed(() => {
    let res = "display: grid;gap: 16px;"
    let repeat = `grid-template-columns: repeat(${globalProperties.value.colNum}, 1fr);`
    return res + repeat;
})

init();

function init() {
    // 获取请求url中携带的流程ID
    let currentFlowId = route.query.id;
    // 根据流程ID查询表单信息
    queryFlowFormInfo({id: currentFlowId}).then(res => {
        if (res.code === "200") {
            let formJson = res.data.formJson
            // 序列化json
            let jsonInfo = JSON.parse(formJson);
            globalProperties.value = jsonInfo.globalProperties
            formBuildList.value = jsonInfo.componentJson
        }
    })
}

function cancelStartFlow() {
    // 关闭当前窗口
    window.close();
}

function submitStartInstance() {
    submitStartInstanceLoading.value = true;
    // 构建表单实例参数
    let formInstanceJson = [];
    for (let index = 0; index < formBuildList.value.length; index++) {
        let itemInfo = formBuildList.value[index];
        if (itemInfo.bindValue === undefined || itemInfo.bindValue === null) {
            continue;
        }
        let tempItem = {
            code: itemInfo.code,
            value: itemInfo.bindValue
        }
        if (typeof tempItem.code !== 'string') {
            tempItem.code = "" + tempItem.code
        }
        formInstanceJson.push(tempItem);
    }
    // 发起流程实例
    let currentFlowId = route.query.id;
    let param = {
        flowId: currentFlowId,
        formInstanceJson: JSON.stringify(formInstanceJson),
        flowInstanceJson: '[]'
    }
    startFlowInstance(param).then(res => {
        if (res.code === "200") {
            ElNotification({
                title: 'Success',
                message: res.message,
                type: 'success'
            })
            // 延迟一秒关闭窗口
            setTimeout(() => {
                submitStartInstanceLoading.value = false
                window.close();
            }, 1000);
        }
    }).catch(res => {
        submitStartInstanceLoading.value = false;
    })

}

</script>

<style scoped lang="less">
.formSubmitButton {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>